<template>

  <div>
    <!--  筛选列-->
    <div class="table-search-columns">
      <a-form-model class="user-list-search-form" ref="query" :model="query">
        <a-row>
          <a-col :span="5">
            <a-form-model-item label="名称" prop="textParam">
              <a-input v-model="query.name" allowClear>
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item label="教室" prop="textParam">
              <a-input v-model="query.classroom"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item label="出库人员" prop="textParam">
              <a-input v-model="query.exportUser"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <!--   表格-->
    <div class="table-wrapper">
      <!--     工具-->
      <div class="table-tools-bar">
        <!--     左侧-->
        <div class="tools-fixed-left">
          <span class="table-title">入库资产列表</span>
        </div>
        <!--       右侧-->
        <div class="tools-fixed-right">
          <a-button class="mx8" type="primary" icon="plus" @click="add">添加</a-button>
          <a-divider type="vertical"></a-divider>
          <a-popconfirm
              v-show="selectedRowKeys.length"
              title="是否删除选中入库资产?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="remove(selectedRowKeys)"
          >
            <a-button class="mx8" type="danger" icon="minus">删除</a-button>
          </a-popconfirm>
          <a-divider type="vertical"></a-divider>
          <a-icon type="search" class="tools-icon" title="查询" @click="getList({})"></a-icon>
        </div>
      </div>
      <!--     table-->
      <div class="table-main-container table-scroll-x-auto">
        <a-table :columns="columns"
                 :data-source="exportPropertyList"
                 :pagination="pagination"
                 :loading="loading"
                 rowKey="id"
                 size="middle"
                 :rowSelection="{selectedRowKeys,onChange:e => selectedRowKeys = e}"
                 @change="getList"
        >
          <template slot="index" slot-scope="text,record,index">
            {{ index + 1 }}
          </template>
          <template #action="record">
            <a-button type="link" @click="update(record.id)">编辑</a-button>
          </template>
        </a-table>
      </div>
    </div>

    <!-- 事件  -->
    <div>
      <!--     添加或者编辑入库资产模态框 编辑时传id 新增时不传-->
      <AddExportPropertyModal ref="addModal" @added="getList({})"
                              @updated="getList({})"
      ></AddExportPropertyModal>
    </div>
  </div>
</template>

<script>
import {$propertyApi} from "@/network/property/PropertyApi";
import AddExportPropertyModal from "../../components/property/AddExportPropertyModal";

const columns = [
  {
    title: '序号',
    key: 'index',
    dataIndex: 'index',
    scopedSlots: {customRender: 'index'}
  },
  {
    title: '名称',
    key: 'name',
    dataIndex: 'name',
    scopedSlots: {customRender: 'name'}
  },
  {
    title: '所在教室',
    key: 'classroom',
    dataIndex: 'classroom',
    scopedSlots: {customRender: 'classroom'}
  },
  {
    title: '数量',
    key: 'count',
    dataIndex: 'count',
    scopedSlots: {customRender: 'count'}
  },
  {
    title: '维修厂家',
    key: 'repairFactory',
    dataIndex: 'repairFactory',
    scopedSlots: {customRender: 'repairFactory'}
  },
  {
    title: '出库人员',
    key: 'exportUser',
    dataIndex: 'exportUser',
    scopedSlots: {customRender: 'enterTime'}
  },
  {
    title: '出库时间',
    key: 'exportTime',
    dataIndex: 'exportTime',
    scopedSlots: {customRender: 'exportTime'}
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: {customRender: 'action'},
    align: 'center'
  }
];

export default {
  name: "ExportList",
  components: {AddExportPropertyModal},
  data() {
    return {
      columns,
      exportPropertyList: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showTotal: (total) => {
          return `共${total}条`;
        },
        showSizeChanger: true,
        pageSizeOptions: ['3', '5', '10', '20'],
        onShowSizeChange: (current, size) => this.pageShowSizeChange(current, size)
      },
      query: {
        name: '',
        classroom: '',
        exportUser: ''
      },
      selectedRowKeys: [],
      loading: false,

    }
  },
  methods: {
    //获取资料出库列表
    getList(page = this.pagination) {
      this.loading = true;
      $propertyApi.getExportPropertyList({
        ...this.query,
        page: page.current,
        limit: page.pageSize
      }).then(({data}) => {
        const pagination = {...this.pagination};
        pagination.total = data.total;
        pagination.current = data.page;
        this.exportPropertyList = data.rows || [];
        this.pagination = pagination;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    },
    add() {
      console.log("列表页面点击新增");
      this.$refs.addModal.add();
    },
    update(id) {
      console.log("列表页面点击编辑");
      this.$refs.addModal.update(id);
    },
    pageShowSizeChange(current, size) {
      this.pagination.pageSize = size;
    },
    //删除选中行
    remove(selectedRowKeys) {
      if (selectedRowKeys.length) {
        $propertyApi.deleteExportProperty({
          idList: selectedRowKeys
        }).then(({data}) => {
          this.getList({});
        })
      }
    }
  },
  mounted() {
    this.getList({});
  },
  computed: {}
}
</script>

<style scoped>

</style>
